<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref, toRefs, watch} from "vue";
import * as echarts from "echarts";

const container = ref(null);
const chart = ref(null);
const props = defineProps({
  options: {
    type: Object,
    default: {},
    required: true,
  },
});
const {options} = toRefs(props);

onMounted(() => {
  chart.value = echarts.init(container.value);
  chart.value.setOption(props.options);
});

onBeforeUnmount(()=> {
  chart.value.dispose(); //销毁
})
watch(
    options,
    (newOptions) => {
      chart.value.setOption(newOptions);
    },
    {deep: true}
);

</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>